<template>
  <view class="periodic-table-container">
    <view class="header">
      <text class="title">元素周期表</text>
      <text class="subtitle" v-if="selectedElements.length > 0">
        已选择: {{ selectedElements.map((e) => e.name).join(", ") }} ({{
          selectedElements.length
        }}个)
      </text>
      <text class="subtitle" v-else>请选择元素（可多选）</text>
    </view>

    <scroll-view class="periodic-grid" scroll-x="true" scroll-y="true">
      <view class="table-wrapper">

        <!-- 周期表主体 -->
        <view class="periodic-table">

          <view
            v-for="element in elements.filter(e => e.category !== 'lanthanide-placeholder' && e.category !== 'actinide-placeholder' && e.category !== 'lanthanide' && e.category !== 'actinide')"
            :key="element.atomicNumber"
            :class="[
              'element',
              element.category,
              { selected: isElementSelected(element) },
              { required: element.atomicNumber === 6 },
            ]"
            :style="getElementStyle(element)"
            @tap="toggleElement(element)"
          >
            <view class="atomic-number">{{ element.atomicNumber }}</view>
            <view class="symbol">{{ element.symbol }}</view>
            <view class="name">{{ element.name }}</view>
            <view class="atomic-mass">{{ element.atomicMass }}</view>
          </view>

          <!-- 镧系占位符 -->
          <view
            v-for="element in elements.filter(e => e.category === 'lanthanide-placeholder' || e.category === 'actinide-placeholder')"
            :key="element.atomicNumber"
            :class="[
              'element',
              element.category,
            ]"
            :style="getElementStyle(element)"
            @tap="toggleElement(element)"
          >
          </view>

          <!-- 占位符元素 -->
          <view
            class="placeholder"
            style="grid-column: 3 / span 10; grid-row: 1"
          ></view>
          <view
            class="placeholder"
            style="grid-column: 3 / span 10; grid-row: 2"
          ></view>
        </view>

        <!-- 镧系和锕系元素展开 -->
      <view class="lanthanide-actinide-section">
        <view class="lanthanide-section">
          <view class="section-title">镧系元素 (57-71)</view>
          <view class="expanded-elements">
            <view
              v-for="element in elements.filter(e => e.category === 'lanthanide').sort((a, b) => a.atomicNumber - b.atomicNumber)"
              :key="element.atomicNumber"
              :class="[
                'element',
                element.category,
                { selected: isElementSelected(element) },
              ]"
              @tap="toggleElement(element)"
            >
              <view class="atomic-number">{{ element.atomicNumber }}</view>
              <view class="symbol">{{ element.symbol }}</view>
              <view class="name">{{ element.name }}</view>
              <view class="atomic-mass">{{ element.atomicMass }}</view>
            </view>
          </view>
        </view>

        <view class="actinide-section">
          <view class="section-title">锕系元素 (89-103)</view>
          <view class="expanded-elements">
            <view
              v-for="element in elements.filter(e => e.category === 'actinide').sort((a, b) => a.atomicNumber - b.atomicNumber)"
              :key="element.atomicNumber"
              :class="[
                'element',
                element.category,
                { selected: isElementSelected(element) },
              ]"
              @tap="toggleElement(element)"
            >
              <view class="atomic-number">{{ element.atomicNumber }}</view>
              <view class="symbol">{{ element.symbol }}</view>
              <view class="name">{{ element.name }}</view>
              <view class="atomic-mass">{{ element.atomicMass }}</view>
            </view>
          </view>
        </view>
      </view>
      </view>
    </scroll-view>

    <view class="footer">
      <view class="button-group">
        <u-button
          type="default"
          @tap="clearSelection"
          :disabled="selectedElements.length === 1 && selectedElements[0].atomicNumber === 6"
        >
          清空选择
        </u-button>
        <u-button
          type="primary"
          @tap="confirmSelection"
          :disabled="selectedElements.length === 0"
        >
          确认选择 ({{ selectedElements.length }}个)
        </u-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const selectedElements = ref([])

// 从globalData加载已选择的元素
const loadSelectedElements = () => {
  const app = getApp()
  if (app && app.globalData.selectedElements) {
    selectedElements.value = [...app.globalData.selectedElements]
  }
}

// 保存选择的元素到globalData
const saveSelectedElements = () => {
  const app = getApp()
  if (app) {
    app.globalData.selectedElements = [...selectedElements.value]
  }
}

// 元素周期表数据
const elements = [
  // 第1周期
  { atomicNumber: 1, symbol: 'H', name: '氢', atomicMass: 1.008, category: 'nonmetal', x: 1, y: 1 },
  { atomicNumber: 2, symbol: 'He', name: '氦', atomicMass: 4.003, category: 'noble-gas', x: 18, y: 1 },

  // 第2周期
  { atomicNumber: 3, symbol: 'Li', name: '锂', atomicMass: 6.941, category: 'alkali-metal', x: 1, y: 2 },
  { atomicNumber: 4, symbol: 'Be', name: '铍', atomicMass: 9.012, category: 'alkaline-earth', x: 2, y: 2 },
  { atomicNumber: 5, symbol: 'B', name: '硼', atomicMass: 10.81, category: 'metalloid', x: 13, y: 2 },
  { atomicNumber: 6, symbol: 'C', name: '碳', atomicMass: 12.01, category: 'nonmetal', x: 14, y: 2 },
  { atomicNumber: 7, symbol: 'N', name: '氮', atomicMass: 14.01, category: 'nonmetal', x: 15, y: 2 },
  { atomicNumber: 8, symbol: 'O', name: '氧', atomicMass: 16.00, category: 'nonmetal', x: 16, y: 2 },
  { atomicNumber: 9, symbol: 'F', name: '氟', atomicMass: 19.00, category: 'halogen', x: 17, y: 2 },
  { atomicNumber: 10, symbol: 'Ne', name: '氖', atomicMass: 20.18, category: 'noble-gas', x: 18, y: 2 },

  // 第3周期
  { atomicNumber: 11, symbol: 'Na', name: '钠', atomicMass: 22.99, category: 'alkali-metal', x: 1, y: 3 },
  { atomicNumber: 12, symbol: 'Mg', name: '镁', atomicMass: 24.31, category: 'alkaline-earth', x: 2, y: 3 },
  { atomicNumber: 13, symbol: 'Al', name: '铝', atomicMass: 26.98, category: 'post-transition', x: 13, y: 3 },
  { atomicNumber: 14, symbol: 'Si', name: '硅', atomicMass: 28.09, category: 'metalloid', x: 14, y: 3 },
  { atomicNumber: 15, symbol: 'P', name: '磷', atomicMass: 30.97, category: 'nonmetal', x: 15, y: 3 },
  { atomicNumber: 16, symbol: 'S', name: '硫', atomicMass: 32.07, category: 'nonmetal', x: 16, y: 3 },
  { atomicNumber: 17, symbol: 'Cl', name: '氯', atomicMass: 35.45, category: 'halogen', x: 17, y: 3 },
  { atomicNumber: 18, symbol: 'Ar', name: '氩', atomicMass: 39.95, category: 'noble-gas', x: 18, y: 3 },

  // 第4周期
  { atomicNumber: 19, symbol: 'K', name: '钾', atomicMass: 39.10, category: 'alkali-metal', x: 1, y: 4 },
  { atomicNumber: 20, symbol: 'Ca', name: '钙', atomicMass: 40.08, category: 'alkaline-earth', x: 2, y: 4 },
  { atomicNumber: 21, symbol: 'Sc', name: '钪', atomicMass: 44.96, category: 'transition-metal', x: 3, y: 4 },
  { atomicNumber: 22, symbol: 'Ti', name: '钛', atomicMass: 47.87, category: 'transition-metal', x: 4, y: 4 },
  { atomicNumber: 23, symbol: 'V', name: '钒', atomicMass: 50.94, category: 'transition-metal', x: 5, y: 4 },
  { atomicNumber: 24, symbol: 'Cr', name: '铬', atomicMass: 51.99, category: 'transition-metal', x: 6, y: 4 },
  { atomicNumber: 25, symbol: 'Mn', name: '锰', atomicMass: 54.94, category: 'transition-metal', x: 7, y: 4 },
  { atomicNumber: 26, symbol: 'Fe', name: '铁', atomicMass: 55.85, category: 'transition-metal', x: 8, y: 4 },
  { atomicNumber: 27, symbol: 'Co', name: '钴', atomicMass: 58.93, category: 'transition-metal', x: 9, y: 4 },
  { atomicNumber: 28, symbol: 'Ni', name: '镍', atomicMass: 58.69, category: 'transition-metal', x: 10, y: 4 },
  { atomicNumber: 29, symbol: 'Cu', name: '铜', atomicMass: 63.55, category: 'transition-metal', x: 11, y: 4 },
  { atomicNumber: 30, symbol: 'Zn', name: '锌', atomicMass: 65.38, category: 'transition-metal', x: 12, y: 4 },
  { atomicNumber: 31, symbol: 'Ga', name: '镓', atomicMass: 69.72, category: 'post-transition', x: 13, y: 4 },
  { atomicNumber: 32, symbol: 'Ge', name: '锗', atomicMass: 72.63, category: 'metalloid', x: 14, y: 4 },
  { atomicNumber: 33, symbol: 'As', name: '砷', atomicMass: 74.92, category: 'metalloid', x: 15, y: 4 },
  { atomicNumber: 34, symbol: 'Se', name: '硒', atomicMass: 78.96, category: 'nonmetal', x: 16, y: 4 },
  { atomicNumber: 35, symbol: 'Br', name: '溴', atomicMass: 79.90, category: 'halogen', x: 17, y: 4 },
  { atomicNumber: 36, symbol: 'Kr', name: '氪', atomicMass: 83.80, category: 'noble-gas', x: 18, y: 4 },

  // 第5周期
  { atomicNumber: 37, symbol: 'Rb', name: '铷', atomicMass: 85.47, category: 'alkali-metal', x: 1, y: 5 },
  { atomicNumber: 38, symbol: 'Sr', name: '锶', atomicMass: 87.62, category: 'alkaline-earth', x: 2, y: 5 },
  { atomicNumber: 39, symbol: 'Y', name: '钇', atomicMass: 88.91, category: 'transition-metal', x: 3, y: 5 },
  { atomicNumber: 40, symbol: 'Zr', name: '锆', atomicMass: 91.22, category: 'transition-metal', x: 4, y: 5 },
  { atomicNumber: 41, symbol: 'Nb', name: '铌', atomicMass: 92.91, category: 'transition-metal', x: 5, y: 5 },
  { atomicNumber: 42, symbol: 'Mo', name: '钼', atomicMass: 95.96, category: 'transition-metal', x: 6, y: 5 },
  { atomicNumber: 43, symbol: 'Tc', name: '锝', atomicMass: 98, category: 'transition-metal', x: 7, y: 5 },
  { atomicNumber: 44, symbol: 'Ru', name: '钌', atomicMass: 101.1, category: 'transition-metal', x: 8, y: 5 },
  { atomicNumber: 45, symbol: 'Rh', name: '铑', atomicMass: 102.9, category: 'transition-metal', x: 9, y: 5 },
  { atomicNumber: 46, symbol: 'Pd', name: '钯', atomicMass: 106.4, category: 'transition-metal', x: 10, y: 5 },
  { atomicNumber: 47, symbol: 'Ag', name: '银', atomicMass: 107.9, category: 'transition-metal', x: 11, y: 5 },
  { atomicNumber: 48, symbol: 'Cd', name: '镉', atomicMass: 112.4, category: 'transition-metal', x: 12, y: 5 },
  { atomicNumber: 49, symbol: 'In', name: '铟', atomicMass: 114.8, category: 'post-transition', x: 13, y: 5 },
  { atomicNumber: 50, symbol: 'Sn', name: '锡', atomicMass: 118.7, category: 'post-transition', x: 14, y: 5 },
  { atomicNumber: 51, symbol: 'Sb', name: '锑', atomicMass: 121.8, category: 'metalloid', x: 15, y: 5 },
  { atomicNumber: 52, symbol: 'Te', name: '碲', atomicMass: 127.6, category: 'metalloid', x: 16, y: 5 },
  { atomicNumber: 53, symbol: 'I', name: '碘', atomicMass: 126.9, category: 'halogen', x: 17, y: 5 },
  { atomicNumber: 54, symbol: 'Xe', name: '氙', atomicMass: 131.3, category: 'noble-gas', x: 18, y: 5 },

  // 第6周期
  { atomicNumber: 55, symbol: 'Cs', name: '铯', atomicMass: 132.9, category: 'alkali-metal', x: 1, y: 6 },
  { atomicNumber: 56, symbol: 'Ba', name: '钡', atomicMass: 137.3, category: 'alkaline-earth', x: 2, y: 6 },
  // 镧系占位符 - 在主表中用占位符表示，实际元素在展开部分
  { atomicNumber: 57, symbol: 'La', name: '镧', atomicMass: 138.9, category: 'lanthanide-placeholder', x: 3, y: 6 },
  { atomicNumber: 72, symbol: 'Hf', name: '铪', atomicMass: 178.5, category: 'transition-metal', x: 4, y: 6 },
  { atomicNumber: 73, symbol: 'Ta', name: '钽', atomicMass: 180.9, category: 'transition-metal', x: 5, y: 6 },
  { atomicNumber: 74, symbol: 'W', name: '钨', atomicMass: 183.8, category: 'transition-metal', x: 6, y: 6 },
  { atomicNumber: 75, symbol: 'Re', name: '铼', atomicMass: 186.2, category: 'transition-metal', x: 7, y: 6 },
  { atomicNumber: 76, symbol: 'Os', name: '锇', atomicMass: 190.2, category: 'transition-metal', x: 8, y: 6 },
  { atomicNumber: 77, symbol: 'Ir', name: '铱', atomicMass: 192.2, category: 'transition-metal', x: 9, y: 6 },
  { atomicNumber: 78, symbol: 'Pt', name: '铂', atomicMass: 195.1, category: 'transition-metal', x: 10, y: 6 },
  { atomicNumber: 79, symbol: 'Au', name: '金', atomicMass: 197.0, category: 'transition-metal', x: 11, y: 6 },
  { atomicNumber: 80, symbol: 'Hg', name: '汞', atomicMass: 200.6, category: 'transition-metal', x: 12, y: 6 },
  { atomicNumber: 81, symbol: 'Tl', name: '铊', atomicMass: 204.4, category: 'post-transition', x: 13, y: 6 },
  { atomicNumber: 82, symbol: 'Pb', name: '铅', atomicMass: 207.2, category: 'post-transition', x: 14, y: 6 },
  { atomicNumber: 83, symbol: 'Bi', name: '铋', atomicMass: 209.0, category: 'post-transition', x: 15, y: 6 },
  { atomicNumber: 84, symbol: 'Po', name: '钋', atomicMass: 209, category: 'metalloid', x: 16, y: 6 },
  { atomicNumber: 85, symbol: 'At', name: '砹', atomicMass: 210, category: 'halogen', x: 17, y: 6 },
  { atomicNumber: 86, symbol: 'Rn', name: '氡', atomicMass: 222, category: 'noble-gas', x: 18, y: 6 },

  // 镧系元素 - 只在展开部分显示，不在主表中
  // 镧系元素数据 (y:8 表示在展开部分的第8行)
  { atomicNumber: 57, symbol: 'La', name: '镧', atomicMass: 138.9, category: 'lanthanide', x: 1, y: 8 },
  { atomicNumber: 58, symbol: 'Ce', name: '铈', atomicMass: 140.1, category: 'lanthanide', x: 2, y: 8 },
  { atomicNumber: 59, symbol: 'Pr', name: '镨', atomicMass: 140.9, category: 'lanthanide', x: 3, y: 8 },
  { atomicNumber: 60, symbol: 'Nd', name: '钕', atomicMass: 144.2, category: 'lanthanide', x: 4, y: 8 },
  { atomicNumber: 61, symbol: 'Pm', name: '钷', atomicMass: 145, category: 'lanthanide', x: 5, y: 8 },
  { atomicNumber: 62, symbol: 'Sm', name: '钐', atomicMass: 150.4, category: 'lanthanide', x: 6, y: 8 },
  { atomicNumber: 63, symbol: 'Eu', name: '铕', atomicMass: 152.0, category: 'lanthanide', x: 7, y: 8 },
  { atomicNumber: 64, symbol: 'Gd', name: '钆', atomicMass: 157.3, category: 'lanthanide', x: 8, y: 8 },
  { atomicNumber: 65, symbol: 'Tb', name: '铽', atomicMass: 158.9, category: 'lanthanide', x: 9, y: 8 },
  { atomicNumber: 66, symbol: 'Dy', name: '镝', atomicMass: 162.5, category: 'lanthanide', x: 10, y: 8 },
  { atomicNumber: 67, symbol: 'Ho', name: '钬', atomicMass: 164.9, category: 'lanthanide', x: 11, y: 8 },
  { atomicNumber: 68, symbol: 'Er', name: '铒', atomicMass: 167.3, category: 'lanthanide', x: 12, y: 8 },
  { atomicNumber: 69, symbol: 'Tm', name: '铥', atomicMass: 168.9, category: 'lanthanide', x: 13, y: 8 },
  { atomicNumber: 70, symbol: 'Yb', name: '镱', atomicMass: 173.0, category: 'lanthanide', x: 14, y: 8 },
  { atomicNumber: 71, symbol: 'Lu', name: '镥', atomicMass: 175.0, category: 'lanthanide', x: 15, y: 8 },

  // 锕系占位符 - 在主表中跳过89-103，放在展开部分
  // 锕系元素数据 (y:9 表示在展开部分的第9行)
  { atomicNumber: 89, symbol: 'Ac', name: '锕', atomicMass: 227, category: 'actinide', x: 1, y: 9 },
  { atomicNumber: 90, symbol: 'Th', name: '钍', atomicMass: 232.0, category: 'actinide', x: 2, y: 9 },
  { atomicNumber: 91, symbol: 'Pa', name: '镤', atomicMass: 231.0, category: 'actinide', x: 3, y: 9 },
  { atomicNumber: 92, symbol: 'U', name: '铀', atomicMass: 238.0, category: 'actinide', x: 4, y: 9 },
  { atomicNumber: 93, symbol: 'Np', name: '镎', atomicMass: 237, category: 'actinide', x: 5, y: 9 },
  { atomicNumber: 94, symbol: 'Pu', name: '钚', atomicMass: 244, category: 'actinide', x: 6, y: 9 },
  { atomicNumber: 95, symbol: 'Am', name: '镅', atomicMass: 243, category: 'actinide', x: 7, y: 9 },
  { atomicNumber: 96, symbol: 'Cm', name: '锔', atomicMass: 247, category: 'actinide', x: 8, y: 9 },
  { atomicNumber: 97, symbol: 'Bk', name: '锫', atomicMass: 247, category: 'actinide', x: 9, y: 9 },
  { atomicNumber: 98, symbol: 'Cf', name: '锎', atomicMass: 251, category: 'actinide', x: 10, y: 9 },
  { atomicNumber: 99, symbol: 'Es', name: '锿', atomicMass: 252, category: 'actinide', x: 11, y: 9 },
  { atomicNumber: 100, symbol: 'Fm', name: '镄', atomicMass: 257, category: 'actinide', x: 12, y: 9 },
  { atomicNumber: 101, symbol: 'Md', name: '钔', atomicMass: 258, category: 'actinide', x: 13, y: 9 },
  { atomicNumber: 102, symbol: 'No', name: '锘', atomicMass: 259, category: 'actinide', x: 14, y: 9 },
  { atomicNumber: 103, symbol: 'Lr', name: '铹', atomicMass: 262, category: 'actinide', x: 15, y: 9 },

  // 第7周期
  { atomicNumber: 87, symbol: 'Fr', name: '钫', atomicMass: 223, category: 'alkali-metal', x: 1, y: 7 },
  { atomicNumber: 88, symbol: 'Ra', name: '镭', atomicMass: 226, category: 'alkaline-earth', x: 2, y: 7 },
  // 锕系占位符 - 在主表中用占位符表示，实际元素在展开部分
  { atomicNumber: 89, symbol: 'Ac', name: '锕', atomicMass: 227, category: 'actinide-placeholder', x: 3, y: 7 },
  // 第7周期后半部分 (104-118)
  { atomicNumber: 104, symbol: 'Rf', name: '𬬻', atomicMass: 267, category: 'transition-metal', x: 4, y: 7 },
  { atomicNumber: 105, symbol: 'Db', name: '𬭊', atomicMass: 268, category: 'transition-metal', x: 5, y: 7 },
  { atomicNumber: 106, symbol: 'Sg', name: '𬭳', atomicMass: 269, category: 'transition-metal', x: 6, y: 7 },
  { atomicNumber: 107, symbol: 'Bh', name: '𬭛', atomicMass: 270, category: 'transition-metal', x: 7, y: 7 },
  { atomicNumber: 108, symbol: 'Hs', name: '𬭶', atomicMass: 277, category: 'transition-metal', x: 8, y: 7 },
  { atomicNumber: 109, symbol: 'Mt', name: '鿏', atomicMass: 278, category: 'transition-metal', x: 9, y: 7 },
  { atomicNumber: 110, symbol: 'Ds', name: '𫟼', atomicMass: 281, category: 'transition-metal', x: 10, y: 7 },
  { atomicNumber: 111, symbol: 'Rg', name: '𬬭', atomicMass: 282, category: 'transition-metal', x: 11, y: 7 },
  { atomicNumber: 112, symbol: 'Cn', name: '鿔', atomicMass: 285, category: 'transition-metal', x: 12, y: 7 },
  { atomicNumber: 113, symbol: 'Nh', name: '鿭', atomicMass: 286, category: 'post-transition', x: 13, y: 7 },
  { atomicNumber: 114, symbol: 'Fl', name: '𫓧', atomicMass: 289, category: 'post-transition', x: 14, y: 7 },
  { atomicNumber: 115, symbol: 'Mc', name: '镆', atomicMass: 290, category: 'post-transition', x: 15, y: 7 },
  { atomicNumber: 116, symbol: 'Lv', name: '𫟷', atomicMass: 293, category: 'post-transition', x: 16, y: 7 },
  { atomicNumber: 117, symbol: 'Ts', name: '鿬', atomicMass: 294, category: 'halogen', x: 17, y: 7 },
  { atomicNumber: 118, symbol: 'Og', name: '鿫', atomicMass: 294, category: 'noble-gas', x: 18, y: 7 },
]

const getElementStyle = (element) => {
  return {
    gridColumn: element.x,
    gridRow: element.y,
  }
}

const isElementSelected = (element) => {
  return selectedElements.value.some(e => e.atomicNumber === element.atomicNumber)
}

const toggleElement = (element) => {
  // 占位符元素不可选择
  if (element.category === 'lanthanide-placeholder' || element.category === 'actinide-placeholder') {
    return
  }

  // 碳元素（原子序数6）为必选元素，不允许取消选择
  if (element.atomicNumber === 6) {
    uni.showToast({
      title: '碳元素为必选元素',
      icon: 'none',
      duration: 2000
    })
    return
  }

  // 限制特定元素不可选：1,2，87,88，97,98,99,100,101,102，103
  const unselectableElements = [1, 2, 87, 88, 97, 98, 99, 100, 101, 102, 103];
  if (unselectableElements.includes(element.atomicNumber)) {
    uni.showToast({
      title: '该元素不可选择',
      icon: 'none',
      duration: 2000
    })
    return
  }

  const index = selectedElements.value.findIndex(e => e.atomicNumber === element.atomicNumber)
  if (index > -1) {
    selectedElements.value.splice(index, 1)
  } else {
    selectedElements.value.push(element)
  }
  // 实时保存到globalData
  saveSelectedElements()
}

const clearSelection = () => {
  // 清空选择时保留碳元素
  const carbonElement = elements.find(e => e.atomicNumber === 6)
  if (carbonElement) {
    selectedElements.value = [carbonElement]
  } else {
    selectedElements.value = []
  }
  saveSelectedElements()
}

const confirmSelection = () => {
  if (selectedElements.value.length > 0) {
    saveSelectedElements()

    // 获取当前页面实例
    const pages = getCurrentPages()
    const currentPage = pages[pages.length - 1]

    // 通过事件通道传递数据回前一个页面
    const eventChannel = currentPage.getOpenerEventChannel()
    if (eventChannel) {
      eventChannel.emit('acceptDataFromOpenedPage', {
        data: selectedElements.value
      })
    }

    // 使用globalData作为备选方案
    const app = getApp()
    if (app) {
      app.globalData.selectedElements = [...selectedElements.value]
    }
    console.log(app.globalData.selectedElements, 'app.globalData.selectedElements');

    uni.navigateBack()
  }
}

// 设置横屏显示
onShow(() => {
  // 加载已选择的元素
  loadSelectedElements()

  // 确保碳元素默认选中且必选
  const carbonElement = elements.find(e => e.atomicNumber === 6)
  if (carbonElement) {
    const isCarbonSelected = selectedElements.value.some(e => e.atomicNumber === 6)
    if (!isCarbonSelected) {
      selectedElements.value.push(carbonElement)
      saveSelectedElements()
    }
  }

  // #ifdef MP-WEIXIN
  // 设置页面为横屏
  // uni.setPageOrientation({
  //   orientation: 'landscape',
  //   success: function () {
  //     console.log('已切换为横屏')
  //   }
  // })
  // #endif

  // 设置导航栏标题
  uni.setNavigationBarTitle({
    title: '元素周期表'
  })
})
</script>

<style scoped lang="scss">
.periodic-table-container {
  width: 100vw;
  height: 100vh;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.header {
  padding: 20rpx;
  background: #fff;
  border-bottom: 1rpx solid #eee;
  text-align: center;

  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    display: block;
  }

  .subtitle {
    font-size: 28rpx;
    color: #666;
    margin-top: 10rpx;
  }
}

.periodic-grid {
  flex: 1;
  overflow: hidden;
}

.table-wrapper {
  width: 1800rpx;
  height: 1200rpx;
  padding: 20rpx;
}

.periodic-table {
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  grid-template-rows: repeat(9, 1fr);
  gap: 2rpx;
  width: 100%;
  height: 100%;
}

.group-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: bold;
  color: #333;
  background: #f8f9fa;
  border-radius: 8rpx;
  border: 1rpx solid #ddd;
}

.select-info {
  display: flex;
  justify-content: center;
  gap: 40rpx;
  margin-bottom: 20rpx;
  padding: 10rpx;
  background: #fff;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.selectable, .unselectable {
  display: flex;
  align-items: center;
  gap: 8rpx;
  font-size: 24rpx;
  color: #666;
}

.selectable-dot {
  width: 20rpx;
  height: 20rpx;
  background: #4CAF50;
  border-radius: 50%;
}

.unselectable-dot {
  width: 20rpx;
  height: 20rpx;
  background: #f44336;
  border-radius: 50%;
}

.lanthanide-actinide-section {
  margin-top: 40rpx;
  width: 100%;
}

.lanthanide-section, .actinide-section {
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
  padding-left: 20rpx;
}

.expanded-elements {
  display: flex;
  flex-wrap: wrap;
  gap: 2rpx;
  background: #f8f9fa;
  padding: 10rpx;
  border-radius: 8rpx;
}

.expanded-elements .element {
  flex: 0 0 calc(5% - 2rpx);
  margin: 1rpx;
}

.element {
  background: #fff;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  padding: 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;

  &:active,
  &.selected {
    transform: scale(1.1);
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
    border-color: #007aff;
  }

  // 碳元素必选样式
  &.required {
    position: relative;

    &::after {
      content: '必';
      position: absolute;
      top: -8rpx;
      right: -8rpx;
      background: #ff5722;
      color: white;
      font-size: 18rpx;
      padding: 2rpx 6rpx;
      border-radius: 10rpx;
      font-weight: bold;
    }
  }

  .atomic-number {
    font-size: 20rpx;
    color: #666;
  }

  .symbol {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin: 4rpx 0;
  }

  .name {
    font-size: 20rpx;
    color: #666;
    text-align: center;
    line-height: 1.2;
  }

  .atomic-mass {
    font-size: 18rpx;
    color: #999;
  }
}

// 元素类别样式
.nonmetal {
  background: #e8f5e8;
}
.noble-gas {
  background: #fff3cd;
}
.alkali-metal {
  background: #f8d7da;
}
.alkaline-earth {
  background: #fff3cd;
}
.metalloid {
  background: #d4edda;
}
.halogen {
  background: #d1ecf1;
}
.transition-metal {
  background: #cce5ff;
}
.post-transition {
  background: #e2e3e5;
}
.lanthanide {
  background: #f8d7da;
}
.actinide {
  background: #f5c6cb;
}
.lanthanide-placeholder {
  background: #f8d7da;
  opacity: 0.6;
  cursor: default;
  position: relative;

  &::after {
    content: '镧系';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20rpx;
    color: #666;
    font-weight: bold;
  }
}
.actinide-placeholder {
  background: #f5c6cb;
  opacity: 0.6;
  cursor: default;
  position: relative;

  &::after {
    content: '锕系';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20rpx;
    color: #666;
    font-weight: bold;
  }
}

.placeholder {
  background: transparent;
  border: none;
}

.lanthanide-label,
.actinide-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: bold;
  color: #666;
  background: #f8f9fa;
  border-radius: 8rpx;
}

.footer {
  padding: 20rpx;
  background: #fff;
  border-top: 1rpx solid #eee;

  .button-group {
    display: flex;
    gap: 20rpx;

    u-button {
      flex: 1;
      height: 80rpx;
      border-radius: 40rpx;
      font-size: 32rpx;
    }
  }
}

// 响应式设计
@media (max-width: 768rpx) {
  .element {
    padding: 5rpx;

    .symbol {
      font-size: 24rpx;
    }

    .name {
      font-size: 16rpx;
    }
  }

  .footer {
    .button-group {
      flex-direction: column;
      gap: 10rpx;
    }
  }
}
</style>
